<!doctype html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <script src="index.js" type="module" defer></script>
</head>
<body class="on">
  <svg id="title" viewBox="0 0 768 480">
    <path class="light" d="M188 192h40v-64h-40v64zm0 16h-16v-96h72v96h-56zm128-80h-40v80h-16v-96h72v96h-16v-80z"/>
    <path class="dark" d="M540 128v24h40v16h-40v40h-16v-96h72v16h-56zm-88 24h40v16h-40v40h-16v-96h72v16h-56v24zm-48-24h-40v64h40v-64zm16 0v80h-72v-96h72v16z"/>
    <g class="menu">
      <g class="item">
        <path class="text" d="M355 306v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm56 2v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm-44 2v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm36 2h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm32-2h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm-16-7h10v16h-2v-14h-1v14h-2v-14h-1v14h-4v-16zm-82 7v9h-10v-2h8v-5h-8v-9h10v2h-6v5h6zm5-5h-3v-2h10v2h-3v14h-4v-14zm36 0h-3v-2h10v2h-3v14h-4v-14z"/>
        <path class="stars" d="M457 308.4l-3.1 1.5h-.6a.5.5 0 0 1-.2-.5l.6-3.3-2.5-2.4a.5.5 0 0 1-.2-.5c0-.2.3-.4.5-.4l3.4-.5 1.6-3a.6.6 0 0 1 1 0l1.6 3 3.4.5c.2 0 .4.2.5.4 0 .2 0 .4-.2.5l-2.5 2.4.6 3.3c0 .2 0 .4-.2.5h-.6l-3.1-1.5zm-146 0l-3.1 1.5h-.6a.5.5 0 0 1-.2-.5l.6-3.3-2.5-2.4a.5.5 0 0 1-.2-.5c0-.2.3-.4.5-.4l3.4-.5 1.6-3a.6.6 0 0 1 1 0l1.6 3 3.4.5c.2 0 .4.2.5.4 0 .2 0 .4-.2.5l-2.5 2.4.6 3.3c0 .2 0 .4-.2.5h-.6l-3.1-1.5z"/>
      </g>
      <g class="item">
        <path class="text" d="M389 338v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm-28-7h10v16h-2v-14h-4v14h-4v-16zm70 7v9h-10v-2h8v-5h-8v-9h10v2h-6v5h6zm-55-5h-3v-2h10v2h-3v14h-4v-14zm-35 0v12h6v2h-10v-16h10v2h-6zm12 0v12h4v-12h-4zm-4-2h10v16h-10v-16zm52 2v12h4v-12h-4zm-4-2h10v16h-10v-16zm16 14h6v2h-10v-16h4v14z"/>
        <path class="stars" d="M447 341.4l-3.1 1.5h-.6a.5.5 0 0 1-.2-.5l.6-3.3-2.5-2.4a.5.5 0 0 1-.2-.5c0-.2.3-.4.5-.4l3.4-.5 1.6-3a.6.6 0 0 1 1 0l1.6 3 3.4.5c.2 0 .4.2.5.4 0 .2 0 .4-.2.5l-2.5 2.4.6 3.3c0 .2 0 .4-.2.5h-.6l-3.1-1.5zm-126 0l-3.1 1.5h-.6a.5.5 0 0 1-.2-.5l.6-3.3-2.5-2.4a.5.5 0 0 1-.2-.5c0-.2.3-.4.5-.4l3.4-.5 1.6-3a.6.6 0 0 1 1 0l1.6 3 3.4.5c.2 0 .4.2.5.4 0 .2 0 .4-.2.5l-2.5 2.4.6 3.3c0 .2 0 .4-.2.5h-.6l-3.1-1.5z"/>
      </g>
      <g class="item">
        <path class="text" d="M413 373v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm-60 0h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm23 7v-12h-3v-2h10v2h-3v12h3v2h-10v-2h3zm12-12h-3v-2h10v2h-3v14h-4v-14zm13 0v12h4v-12h-4zm0-2h6v16h-10v-16h4zm-36 2v12h4v-12h-4zm0-2h6v16h-10v-16h4z" opacity=".2"/>
        <path class="stars" d="M435 376.4l-3.1 1.5h-.6a.5.5 0 0 1-.2-.5l.6-3.3-2.5-2.4a.5.5 0 0 1-.2-.5c0-.2.3-.4.5-.4l3.4-.5 1.6-3a.6.6 0 0 1 1 0l1.6 3 3.4.5c.2 0 .4.2.5.4 0 .2 0 .4-.2.5l-2.5 2.4.6 3.3c0 .2 0 .4-.2.5h-.6l-3.1-1.5zm-102 0l-3.1 1.5h-.6a.5.5 0 0 1-.2-.5l.6-3.3-2.5-2.4a.5.5 0 0 1-.2-.5c0-.2.3-.4.5-.4l3.4-.5 1.6-3a.6.6 0 0 1 1 0l1.6 3 3.4.5c.2 0 .4.2.5.4 0 .2 0 .4-.2.5l-2.5 2.4.6 3.3c0 .2 0 .4-.2.5h-.6l-3.1-1.5z"/>
      </g>
    </g>
    <path class="dark" d="M175 443h-6v-2h6v-5h-8v-2h10v16h-10v-2h8v-5zm122 5h6v-5h-6v5zm-2 0v-14h10v16h-10v-2zm2-7h6v-5h-6v5zm-30-5h-8v-2h10v9h-8v5h8v2h-10v-9h8v-5zm-108 12v-12h-4v-2h6v14h4v2h-10v-2h4zm128 0v-12h-4v-2h6v14h4v2h-10v-2h4zm-8-14h2v16h-10v-16h8zm0 2h-6v12h6v-12zm-72 7v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm154 2v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm80 2v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm62 2v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm80 2v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm-234 2v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm104 2v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm142 2v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm-412 0h4v2h-4v7h-4v-16h4v7zm16 2h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm32-2h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm308 0h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm-134 7h4v-14h2v16h-10v-16h4v14zm12-14h6v16h-2v-14h-4v14h-4v-16h4zm98 0h6v16h-2v-14h-4v14h-4v-16h4zm104 0h6v16h-2v-14h-4v14h-4v-16h4zm-400 0h6v16h-2v-14h-1v14h-2v-14h-1v14h-4v-16h4zm352 0h6v16h-2v-14h-1v14h-2v-14h-1v14h-4v-16h4zm-418 14v2h-10v-2h8v-5h-8v-9h10v2h-6v5h6v7zm96 0v2h-10v-2h8v-5h-8v-9h10v2h-6v5h6v7zm-112 0v-12h-6v-2h10v16h-10v-9h2v7h4zm389 0v-12h-3v-2h10v2h-3v12h3v2h-10v-2h3zm80 0v-12h-3v-2h10v2h-3v12h3v2h-10v-2h3zm-269-12v12h4v-12h-4zm0-2h6v16h-10v-16h4zm92 2v12h4v-12h-4zm0-2h6v16h-10v-16h4zm202 2v12h4v-12h-4zm0-2h6v16h-10v-16h4zm-140 2v12h4v-12h-4zm0-2h6v16h-10v-16h4zm-98 2v12h4v-12h-4zm0-2h6v16h-10v-16h4zm-20 2v12h4v-12h-4zm0-2h6v16h-10v-16h4zm178 14h6v2h-10v-16h4v14zm-364-14h2v7h-2v-7zm0 9h2v7h-2v-7zm246-2v2h-4v-2h4zm-92 0v2h-4v-2h4zm-66-1h2v4h-2v-4zm194-2h8v8h-8v-8zm-154 0h8v8h-8v-8z"/>
  </svg>

  <svg id="controls" viewBox="0 0 768 480" hidden>
    <g id="gamepad-controls">
      <g id="button-toggle" class="dark">
        <path d="M500 137v-12h-24v24h24v-8h4v12h-32v-32h32v16h43v2h-59v-2z"/>
        <path d="M601 139h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm-12 0h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm32-2h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm-12 7h6v2h-10v-16h4v14zm-30 2h-10v-16h10v16zm-2-2v-12h-4v12h4zm-17-12h-3v-2h10v2h-3v14h-4v-14z"/>
      </g>
      <g id="button-jump" class="dark">
        <path d="M450 125h-12v24h24v-24h-8v-4h12v32h-32v-32h16v-20h97v2h-95v36h-2z"/>
        <path d="M597 103v7h-4V94h10v9h-6zm0-2h4v-5h-4v5zm-24 7h4V94h2v16h-10V94h4v14zm8-14h10v16h-2V96h-1v14h-2V96h-1v14h-4V94zm-18 14V96h-6v-2h10v16h-10v-9h2v7h4z"/>
      </g>

      <path id="button-left" class="dark" d="M193 122v7h-4v-16h10v2h-6v5h4v2h-4zm-12-2h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm23-5h-3v-2h10v2h-3v14h-4v-14zm-35 12h6v2h-10v-16h4v14zm99 4h18v4h-22v-11h4v7zm-4-11v-13h22v4h-18v9h10v2h-59v-2h45z"/>
      <path id="button-right" class="dark" d="M158 78v7h-4V69h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm36 0h4v-7h2v16h-2v-7h-4v7h-4V69h4v7zm-8 2h-2v-2h4v9h-10V69h10v2h-6v12h4v-5zm-17 5V71h-3v-2h10v2h-3v12h3v2h-10v-2h3zm36-12h-3v-2h10v2h-3v14h-4V71zm117 40h-8v-4h8V76H219v-2h105v48h-2v-11zm10 20v-20h-6v-4h10v28h-22v-4h18z"/>
      <path class="dark" d="M379 135h-20v4h20v-4zm2-2v8h-24v-8h24z"/>
      <path class="dark" d="M409 135h-20v4h20v-4zm2-2v8h-24v-8h24z"/>
      <path class="dark" d="M314 131v26h-28v-26h4v22h20v-22h4zm0-46v26h-4V89h-20v22h-4V85h28z"/>
      <path class="dark" d="M246 175h276v-34h8v42H238v-59h8v51zM528 51h2v50h-8V67H246v7h-8V51h143V0h6v51h141zM238 78h8v42h-8V78zm284 27h8v32h-8v-32z"/>
    </g>

    <g id="keyboard-controls">
      <g id="key-w" class="dark">
        <path d="M268 276h-24v24h24v-24zm4-4v32h-32v-32h32z"/>
        <path d="M273 255v7h-4v-16h10v9h-6zm0-2h4v-5h-4v5zm-24 7h4v-14h2v16h-10v-16h4v14zm8-14h10v16h-2v-14h-1v14h-2v-14h-1v14h-4v-16zm-18 14v-12h-6v-2h10v16h-10v-9h2v7h4z"/>
        <path d="M255 294h1v-14h2v14h1v-14h2v16h-10v-16h4v14z"/>
      </g>
      <g id="key-a" class="dark">
        <path d="M174 325v7h-4v-16h10v2h-6v5h4v2h-4zm-12-2h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm23-5h-3v-2h10v2h-3v14h-4v-14zm-35 12h6v2h-10v-16h4v14z"/>
        <path d="M232 312h-24v24h24v-24zm4-4v32h-32v-32h32z"/>
        <path d="M219 325v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5z"/>
      </g>
      <g id="key-d" class="dark">
        <path d="M304 312h-24v24h24v-24zm4-4v32h-32v-32h32z"/>
        <path d="M291 318v12h4v-12h-4zm-4-2h10v16h-10v-16z"/>
        <path d="M324 325v7h-4v-16h10v9h-2v7h-2v-7h-2zm0-2h4v-5h-4v5zm36 0h4v-7h2v16h-2v-7h-4v7h-4v-16h4v7zm-8 2h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm-17 5v-12h-3v-2h10v2h-3v12h3v2h-10v-2h3zm36-12h-3v-2h10v2h-3v14h-4v-14z"/>
      </g>
      <path class="dark" d="M268 312h-24v24h24v-24zm4-4v32h-32v-32h32z"/>
      <g id="key-space" class="dark">
        <path d="M560 312H440v24h120v-24zm4-4v32H436v-32h128z"/>
        <path d="M499 325v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm-12 2v7h-4v-16h10v9h-6zm0-2h4v-5h-4v5zm36 0h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm-42 0v9h-10v-2h8v-5h-8v-9h10v2h-6v5h6zm30-5v12h6v2h-10v-16h10v2h-6z"/>
        <path d="M509 361h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm-12 0h-2v-2h4v9h-10v-16h10v2h-6v12h4v-5zm32-2h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm-12 7h6v2h-10v-16h4v14zm-32 0v-12h-4v12h4zm2 2h-10v-16h10v16zm-19-14h-3v-2h10v2h-3v14h-4v-14z"/>
      </g>
    </g>

    <g class="menu">
      <g class="item">
        <path class="text" d="M333 441v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm24 0h4v2h-4v7h-4v-16h4v7zm64 0h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm24 7h4v-14h2v16h-10v-16h4v14zm-16-14h10v16h-2v-14h-4v14h-4v-16zm-24 0h10v16h-2v-14h-1v14h-2v-14h-1v14h-4v-16zm-29 2h-3v-2h10v2h-3v14h-4v-14zm-31 0v12h6v2h-10v-16h10v2h-6zm-24 0v12h4v-12h-4zm-4-2h10v16h-10v-16zm72 2v12h4v-12h-4zm-4-2h10v16h-10v-16zm-24 0h2v7h-2v-7zm0 9h2v7h-2v-7zm-36-2v2h-4v-2h4z"/>
        <path class="stars" d="M467 443.5l-3.7 1.9.7-4.1-3-2.9 4.1-.6 1.9-3.8 1.9 3.8 4.1.6-3 2.9.7 4.1zM301 443.5l-3.7 1.9.7-4.1-3-2.9 4.1-.6 1.9-3.8 1.9 3.8 4.1.6-3 2.9.7 4.1z"/>
      </g>
    </g>
  </svg>

  <svg id="game" viewBox="0 0 768 480" hidden>
    <defs>
      <pattern id="spike-up" width="16" height="10" patternUnits="userSpaceOnUse">
        <polygon points="8 0 16 8 0 8"/>
      </pattern>
      <pattern id="spike-down" width="16" height="10" patternUnits="userSpaceOnUse">
        <polygon points="0 0 16 0 8 8"/>
      </pattern>
      <pattern id="spike-left" width="10" height="16" patternUnits="userSpaceOnUse">
        <polygon points="8 0 8 16 0 8"/>
      </pattern>
      <pattern id="spike-right" width="10" height="16" patternUnits="userSpaceOnUse">
        <polygon points="0 0 8 8 0 16"/>
      </pattern>
    </defs>

    <svg id="congrats" hidden>
      <path class="light" d="M300 158h-30v60h-12v-72h54v72h-12v-60zm54 24h24v36h-54v-72h54v12h-42v48h30v-12h-12v-12zm114 12v24h-12v-72h54v72h-12v-24h-30zm-35 0v24h-12v-24h-19v24h-12v-72h54v48h-11zm197 0h-42v-48h54v12h-42v24h42v36h-54v-12h42v-12zm-75-36v60h-12v-60h-21v-12h54v12h-21zm-87 24h30v-24h-30v24zm-66 0h30v-24h-30v24zm-156 36h-54v-72h54v72zm-66-60h-42v48h42v12h-54v-72h54v12zm24 48h30v-48h-30v48z"/>
      <path class="light" d="M333 353v7h-4v-16h10v16h-2v-7h-4zm0-2h4v-5h-4v5zm24 0h4v2h-4v7h-4v-16h4v7zm64 0h4v2h-4v5h6v2h-10v-16h10v2h-6v5zm24 7h4v-14h2v16h-10v-16h4v14zm-16-14h10v16h-2v-14h-4v14h-4v-16zm-24 0h10v16h-2v-14h-1v14h-2v-14h-1v14h-4v-16zm-29 2h-3v-2h10v2h-3v14h-4v-14zm-31 0v12h6v2h-10v-16h10v2h-6zm-24 0v12h4v-12h-4zm-4-2h10v16h-10v-16zm72 2v12h4v-12h-4zm-4-2h10v16h-10v-16zm-24 0h2v7h-2v-7zm0 9h2v7h-2v-7zm-36-2v2h-4v-2h4z"/>

      <g class="menu">
        <g class="item selected">
          <path class="stars" d="M467 355.5l-3.7 1.9.7-4.1-3-2.9 4.1-.6 1.9-3.8 1.9 3.8 4.1.6-3 2.9.7 4.1zM301 355.5l-3.7 1.9.7-4.1-3-2.9 4.1-.6 1.9-3.8 1.9 3.8 4.1.6-3 2.9.7 4.1z"/>
        </g>
      </g>
    </svg>

    <svg id="hud" y="24">
      <defs>
        <pattern id="n0" width="10" height="16"><path d="M2 2v12h6V2H2zM0 0h10v16H0V0zm4 6h2v4H4V6z"/></pattern>
        <pattern id="n1" width="10" height="16"><path d="M4 14V2H0V0h6v14h4v2H0v-2h4z"/></pattern>
        <pattern id="n2" width="10" height="16"><path d="M8 2H0V0h10v9H2v5h8v2H0V7h8z"/></pattern>
        <pattern id="n3" width="10" height="16"><path d="M8 9H2V7h6V2H0V0h10v16H0v-2h8z"/></pattern>
        <pattern id="n4" width="10" height="16"><path d="M8 9H0V0h2v7h6V0h2v16H8z"/></pattern>
        <pattern id="n5" width="10" height="16"><path d="M10 7v9H0v-2h8V9H0V0h10v2H2v5z"/></pattern>
        <pattern id="n6" width="10" height="16"><path d="M2 14h6V9H2v5zm-2 2V0h10v2H2v5h8v9H0z"/></pattern>
        <pattern id="n7" width="10" height="16"><path d="M8 2H0V0h10v16H8z"/></pattern>
        <pattern id="n8" width="10" height="16"><path d="M2 14h6V9H2v5zm-2 2V0h10v16H0zm2-9h6V2H2v5z"/></pattern>
        <pattern id="n9" width="10" height="16"><path d="M0 0h10v16H8V9H0V0zm8 2H2v5h6V2z"/></pattern>
      </defs>

      <svg id="level" x="24">
        <path d="M8.7 13.6L4.2 16c-.3.2-.6.1-.9 0A.8.8 0 0 1 3 15l.9-4.8L.3 6.9a.8.8 0 0 1-.3-.8c.1-.3.4-.5.7-.6l5-.7L8 .4a.8.8 0 0 1 1.4 0l2.3 4.4 5 .7c.4 0 .6.3.7.6.1.3 0 .6-.2.8l-3.6 3.4.8 4.8c0 .3 0 .6-.3.7-.2.2-.6.3-.8.1l-4.6-2.3z" shape-rendering="auto"/>
        <svg x="20"><g id="level-counter"></g></svg>
      </svg>

      <svg id="deaths" x="84">
        <path d="M13 10v6h-2v-1H9v1H7v-1H5v1H3v-6H0V0h16v10h-3zM9 3v4h4V3H9zM3 3v4h4V3H3z"/>
        <svg x="20"><g id="death-counter"></g></svg>
      </svg>

      <svg id="esc" x="434" hidden>
        <path d="M152 9h-2V7h4v9h-10V0h10v2h-6v12h4V9zM72 7h4v2h-4v5h6v2H68V0h10v2h-6v5zm18 0v9H80v-2h8V9h-8V0h10v2h-6v5h6zm6-5v12h6v2H92V0h10v2h-6zm64 0v12h4V2h-4zm-4-2h10v16h-10V0zm36 9v7h-4V0h10v16h-2V9h-4zm0-2h4V2h-4v5zm24 0h4v2h-4v7h-4V0h4v7zm64 0h4v2h-4v5h6v2h-10V0h10v2h-6v5zm24 7h4V0h2v16h-10V0h4v14zM288 0h10v16h-2V2h-4v14h-4V0zm-24 0h10v16h-2V2h-1v14h-2V2h-1v14h-4V0zm-29 2h-3V0h10v2h-3v14h-4V2zm-31 0v12h6v2h-10V0h10v2h-6zm-24 0v12h4V2h-4zm-4-2h10v16h-10V0zm72 2v12h4V2h-4zm-4-2h10v16h-10V0zM16 9v7h-4V0h10v9h-2v7h-2V9h-2zm0-2h4V2h-4v5zM4 9v7H0V0h10v9H4zm0-2h4V2H4v5zm24 0h4v2h-4v5h6v2H24V0h10v2h-6v5zm30 0v9H48v-2h8V9h-8V0h10v2h-6v5h6zM46 7v9H36v-2h8V9h-8V0h10v2h-6v5h6zm69-5h-3V0h10v2h-3v14h-4V2zm13 0v12h4V2h-4zm-4-2h10v16h-10V0zm96 0h2v7h-2V0zm0 9h2v7h-2V9zm-36-2v2h-4V7h4z"/>
      </svg>
    </svg>

    <svg id="death">
      <rect x="27" y="27" width="10" height="12" style="transform-origin: 32px 32px"/>
      <rect x="20" y="4" width="2" height="2" style="transform-origin: -10px 30px"/>
      <rect x="0" y="28" width="2" height="2" style="transform-origin: 7px 70px"/>
      <rect x="37" y="12" width="2" height="2" style="transform-origin: 15px 15px"/>
      <rect x="5" y="42" width="2" height="2" style="transform-origin: 30px 70px"/>
      <rect x="48" y="53" width="2" height="2" style="transform-origin: 60px 30px"/>
      <rect x="55" y="26" width="2" height="2" style="transform-origin: 37px 5px"/>
      <rect x="10" y="15" width="2" height="2" style="transform-origin: -2px 55px"/>
      <rect x="24" y="11" width="6" height="6" style="transform-origin: 5px 32px"/>
      <rect x="20" y="43" width="6" height="6" style="transform-origin: 46px 51px"/>
      <rect x="32" y="46" width="6" height="6" style="transform-origin: 54px 37px"/>
      <rect x="37" y="59" width="2" height="2" style="transform-origin: 65px 41px"/>
      <rect x="23" y="55" width="2" height="2" style="transform-origin: 45px 51px"/>
      <rect x="62" y="41" width="2" height="2" style="transform-origin: 56px 6px"/>
      <rect x="52" y="2" width="2" height="2" style="transform-origin: 14px -13px"/>
      <rect x="41" y="21" width="8" height="8" style="transform-origin: 28px 15px"/>
      <rect x="48" y="11" width="4" height="4" style="transform-origin: 10px -4px"/>
      <rect x="42" y="36" width="8" height="8" style="transform-origin: 47px 19px"/>
      <rect x="53" y="44" width="3" height="3" style="transform-origin: 57px 16px"/>
      <rect x="10" y="52" width="2" height="2" style="transform-origin: 47px 66px"/>
      <rect x="15" y="22" width="8" height="8" style="transform-origin: 14px 44px"/>
      <rect x="7" y="29" width="4" height="4" style="transform-origin: 19px 56px"/>
      <rect x="14" y="36" width="4" height="4" style="transform-origin: 30px 55px"/>
    </svg>
  </svg>

  <svg id="editor" viewBox="0 0 768 480" hidden>
    <defs>
      <pattern id="edit-spike-up" width="16" height="10" patternUnits="userSpaceOnUse">
        <polygon points="8 0 16 8 0 8"/>
      </pattern>
      <pattern id="edit-spike-down" width="16" height="10" patternUnits="userSpaceOnUse">
        <polygon points="0 0 16 0 8 8"/>
      </pattern>
      <pattern id="edit-spike-left" width="10" height="16" patternUnits="userSpaceOnUse">
        <polygon points="8 0 8 16 0 8"/>
      </pattern>
      <pattern id="edit-spike-right" width="10" height="16" patternUnits="userSpaceOnUse">
        <polygon points="0 0 8 8 0 16"/>
      </pattern>
      <pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
        <rect width="1" height="7" x="7" fill="red"/>
        <rect width="8" height="1" y="7" fill="red"/>
      </pattern>
    </defs>
    <rect class="grid" x="0" y="0" width="100%" height="100%" fill="url(#grid)" opacity="0.1"/>
  </svg>

  <div id="dialog" hidden>
    <h3>Instructions</h3>
    <ul>
      <li><kbd>H</kbd> <span>Show these instructions</span></li>
      <li><kbd>P</kbd> <span>Create new platform</span></li>
      <li><kbd>S</kbd> + <kbd>U</kbd> <span>Create new up spike</span></li>
      <li><kbd>S</kbd> + <kbd>D</kbd> <span>Create new down spike</span></li>
      <li><kbd>S</kbd> + <kbd>L</kbd> <span>Create new left spike</span></li>
      <li><kbd>S</kbd> + <kbd>R</kbd> <span>Create new right spike</span></li>
      <li><kbd>SHIFT</kbd> + <code>Click</code> <span>Remove platform/spike</span></li>
      <li><kbd>G</kbd><span>Play this level</span></li>
      <li><kbd>ESC</kbd><span>Back to menu</span></li>
      <li><code>Double Click</code> <span>Toggle platform layer</span></li>
    </ul>

    <button type="button" id="close-dialog">Close instructions</button>
  </div>
</body>
